import React from 'react'
import {Toast} from 'antd-mobile'
import history from '../../../history'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../../reducers'
import { actions as UserAction } from '../../../reducers/user'

import moment from 'moment'

import './index.less'

class Role extends React.Component {
    componentDidMount() {
        this.props.get_user_info()
    }
    formatRoleStatus(role) {
        if (!role) {return '申请'}
        switch(role.status) {
            case 'approve':
                return '已开通'
            case 'pending':
                return '审核中'
            case 'reject':
                return '拒绝'
        }
    }
   

    render() {
        console.log(this.props.userInfo.user_role.publish)
        const {userInfo} = this.props,
                jump = type => { 
                    if (type=='manager'&&(this.props.userInfo.is_publish==false||this.props.userInfo.is_execute)) {
                        Toast.info('请先成为需求录入创客和任务执行创客')
                        return false
                    } else {
                        if (this.props.userInfo.project_category[0]) {
                            return !userInfo.user_role[type]
                        } else {
                            Toast.info('请先设置分类', 1)
                            setTimeout(()=>history.push('/my-category'), 1000)
                            return false
                        }
                    }
                },
                _class = (role) =>  {
                    if (!role) {return 'lt-a'}
                    switch(role.status) {
                        case 'approve':
                            return 'lt-c'
                        case 'pending':
                            return 'lt-b'
                        case 'reject':
                            return 'lt-a'
                    }
                }
        
        return (
            <div class="role-box">
                {/* <div class="head">
                    <div class="photo">
                        <p><img src={userInfo.avatar} /></p>
                        <p>{userInfo.nickname}</p>
                    </div>
                </div> */}
                <div class="photos">
                    <div class="img"><img src={userInfo.avatar} alt="头像"/></div>
                    <div class="info">
                        <div>{userInfo.nickname}</div>
                        <div>
                            <em>注册时间：</em>
                            <i>{moment(userInfo.created_at).format('LL')}</i>
                        </div>
                        <div>
                            <em>当前评分：</em>
                            <i>{userInfo.rank}</i>
                        </div>
                    </div>
                </div>
                <div class="role-list">
                    <div class='hr'/>
                    <div>
                        <div>
                            <p>需求录入创客</p>
                            <p>需求录入创客在系统发布需求中</p>
                        </div>
                        <div class={_class(userInfo.user_role.publish)}>
                            <button onClick={()=>jump('publish')?history.push('/role/a_apply'):false}>
                            {this.formatRoleStatus(userInfo.user_role.publish)}
                            </button>
                        </div>
                    </div>
                    
                    <div class='hr'/>
                    <div>
                        <div>
                            <p>任务执行创客</p>
                            <p>任务执行创客在系统中实现需求</p>
                        </div>
                        <div class={_class(userInfo.user_role.execute)}>
                            <button onClick={()=>jump('execute')?history.push('/role/b_apply'):false}>
                            {this.formatRoleStatus(userInfo.user_role.execute)}
                            </button>
                        </div>
                    </div>

                    <div class='hr'/>
                    <div>
                        <div>
                            <p>项目经理</p>
                            <p>项目经理在系统中对接需求录入与任务执行方</p>
                        </div>
                        <div class={_class(userInfo.user_role.manager)}>
                            <button onClick={()=>jump('manager')?history.push('/role/pm_apply'):false}>
                            {this.formatRoleStatus(userInfo.user_role.manager)}
                            </button>
                        </div>
                    </div>

                    {
                        userInfo.is_admin ? 
                        <React.Fragment>
                            <div class='hr'/>
                            <div>
                                <div>
                                    <p>管理员</p>
                                    <p>管理员</p>
                                </div>
                                <div class='lt-c'>
                                    <button>
                                    已开通
                                    </button>
                                </div>
                            </div>
                        </React.Fragment>
                        : null
                    }
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
      userInfo: state.user.userInfo,
    }
}
  
function mapDispatchToProps(dispatch) {
    return  {
        get_user_info: bindActionCreators(UserAction.get_user_info, dispatch),
    }
}
  
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Role)